<template>
  <section class="knife-content height100">
    <my-header/>
    <div class="assort-wrapper height100">
      <!-- 左边 -->
      <div class="assort-left height100" ref="assortLeft">
        <ul class="assort-left-ul" >
          <li class="assort-item" v-for="(item, index) in menu" :key="index"
            @click="selectMenu(index)"
            :class="{'menu-active': currentIndex === index}">
            第{{index}}列
          </li>
        </ul>
      </div>
      <!-- 右边 -->
      <div class="assort-right" ref="assortRight">
        <div class="assort-detail">
          <p class="pad">longlonglong</p>
          <p class="pad">longlonglong</p>
          <p class="pad">longlonglong</p>
          <p class="pad">longlonglong</p>
          <p class="pad">longlonglong</p>
          <p class="pad">longlonglong</p>
          <p class="pad">longlonglong</p>
          <p class="pad">longlonglong</p>
          <p class="pad">longlonglong</p>
          <p class="pad">longlonglong</p>
          <p class="pad">longlonglong</p>
          <p class="pad">longlonglong</p>
        </div>
      </div>
    </div>
    <my-footer/>
  </section>
</template>

<script>
import BetterScroll from 'better-scroll'
import { myFooter, myHeader } from '@/components/index'
export default {
  components: {
    myFooter,
    myHeader
  },
  data () {
    return {
      menu: new Array(20).fill(1),
      currentIndex: 0
    }
  },
  activated () {
    console.log('缓存')
    this.scrollLeft = new BetterScroll(this.$refs.assortLeft, { click: true })
    this.scrollRight = new BetterScroll(this.$refs.assortRight, { click: true })
  },
  methods: {
    selectMenu (idx) {
      console.log(idx)
      this.currentIndex = idx
    }
  },
  mounted () {
    console.log('mounted')
    // this.scrollLeft = new BetterScroll(this.$refs.assortLeft, {})
  }
}
</script>

<style lang="stylus" scoped>
  $bg-white = #ffffff
  $bg-gray = #f6f6f6
  $bg-red = #ff0000


  .assort-wrapper
    display flex
    justify-content flex-start
    background $bg-white
    overflow hidden

    .assort-left
      height: 100%;
      width 80Px
      background $bg-gray

    .assort-right
      flex 1

  .assort-item
    font-size 24px
    line-height 70px
    text-align center

  .menu-active
    position relative
    background $bg-white
    font-size 28px
    font-weight bold
    &:before
      position absolute
      display inline-block
      content ''
      background $bg-red
      width 5Px
      height 12Px
      left 0
      top: 50%;
      transform: translateY(-50%);

  .pad
    padding 50PX 0

  .height100
    height 100%




</style>
